<template>
  <view class="container">
    <view class="user-section">
      <view class="bg"></view>
      <view style="height: 200upx;width: 710upx;color: #fff;">
        <view style="position: absolute;top: 50upx;" @click="jump" data-src="/pageA/member/info/info">
          <image style="width: 150upx;height: 150upx;border: 2px solid #fff;border-radius: 50%;" :src="res.avatar||'/static/missing-face.png'"></image>
        </view>
        <view style="position: absolute;top: 67upx;left: 200upx;">
          <view style="line-height: 38upx;">
            工号:{{res.id||'当前用户无id'}}
          </view>
          <view style="line-height: 38upx;">
            {{res.nickname||'游客'}}
          </view>
          <view style="line-height: 38upx;display: flex;">
            <view v-if="res.daili!=='暂无代理'">{{res.daili}}</view>
            {{res.level_name}}
          </view>
          <!-- <view style="line-height: 38upx;display: flex;" v-if="res.credit2">
            <view>余额:</view>
            {{res.credit2}}
          </view> -->
        </view>
        <view style="margin-left: 220upx;display: flex;position: absolute;right: 40upx;top: 85upx;">
          <!-- <view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="../commission/all">
            <image style="width: 50upx;height:50upx;" src="../../static/message.png" mode=""></image>
            <text style="font-size: 20upx;">提现</text>
          </view> -->
          <view @click="navTo('/pages/commission/qrcode/qrcode')" style="display: flex;flex-direction: column;margin-left: 20upx;text-align: center;">
            <image style="width: 50upx;height: 50upx;" src="../../static/set.png" mode=""></image>
            <text style="font-size: 20upx;">设置</text>
          </view>

        </view>
      </view>
      <!-- <view class="tj-sction" style="display: flex;flex-direction: column;position: absolute;top: 240upx; width: 710upx;">

        <view style="display: flex;justify-content: space-around;">
          <view class="tj-item" @click="jump" data-src="/pageA/jjmx/jjmx">
					<view class="num" style="color: #fff;font-weight: 550;padding-left: 6upx;" v-if="res.credit2">{{res.credit2}}</view>
					<view style="color: #fff;">余额</view>
				</view>
          <view class="tj-item" @click="navTo('/pageA/wdsq/wdsq')">
					<view class="num" style="font-weight: 550" v-if="res.sqnum">{{res.sqnum}}</view>
					<view style="color: #fff;">数权</view>
				</view>
          <view class="tj-item" >
					<view class="num" style="font-weight: 550">{{res.sanbai_coupon}}</view>
					<view style="color: #fff;">300区拼团券</view>
				</view>
          <view class="tj-item">
            <view class="num" style="font-weight: 550;padding-left: 6upx;">{{res.yiqian_dj}}</view>
            <view style="color: #fff;">待释放分红券</view>
          </view>
          <view class="tj-item">
            <view class="num" style="font-weight: 550;padding-left: 6upx;">{{res.credit2}}</view>
            <view style="color: #fff;">余额</view>
          </view>
        </view>
      </view> -->
    </view>

    <view class="cover-container">
      <!-- 订单 -->
      <view class="order-section" style="display: flex;justify-content: space-between;margin-bottom: -40upx;padding:20upx;height: 100upx;margin-top: 185upx;">
        <view class="" style="font-size: 40upx;font-weight: 550;">
          我的订单
        </view>
        <view style="font-size: 24upx;color: #908F8D;font-weight: 550;line-height: 50upx;" @click="navTo('/pages/order/order?index=0')"
          hover-class="common-hover" :hover-stay-time="50">
          全部 >
        </view>
      </view>
      <view class="order-section" style="color:#000">
        <!-- <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view> -->
        <view class="order-item" @click="navTo('/pages/order/order?index=1')" hover-class="common-hover"
          :hover-stay-time="50">
          <image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifukuan.png" mode=""></image>
          <text>待付款</text>
        </view>
        <view class="order-item" @click="navTo('/pages/order/order?index=2')" hover-class="common-hover"
          :hover-stay-time="50">
          <image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifahuo.png" mode=""></image>
          <text>待发货</text>
        </view>

        <view class="order-item" @click="navTo('/pages/order/order?index=3')" hover-class="common-hover"
          :hover-stay-time="50">
          <image style="display: block; width: 80upx;height: 120upx;" src="../../static/daishouhuo.png" mode=""></image>
          <text>待收货</text>
        </view>
        <view class="order-item" @click="navTo('/pages/order/order?index=4')" hover-class="common-hover"
          :hover-stay-time="50">
          <image style="display: block; width: 80upx;height: 120upx;" src="../../static/daipingjia.png" mode=""></image>
          <text>已完成</text>
        </view>
        <view class="order-item" @click="navTo('/pages/order/order?index=5')" hover-class="common-hover"
          :hover-stay-time="50">
          <image style="display: block; width: 80upx;height: 120upx;" src="../../static/shouhou.png" mode=""></image>
          <text>已取消</text>
        </view>
      </view>
      <!-- 宫格布局 -->
      <!-- <view class="history-section icon">
        <view class="" style="font-size: 40upx;font-weight: 550;padding:0upx 20upx;height: 80upx;line-height: 80upx;">
          我的钱包
        </view>
        <view style="padding: 0 30rpx;">
          <u-grid :col="3" @click="gridClick">
            <u-grid-item index="1">
              <view class="grid-text2">{{res.zong}}</view>
              <view class="grid-text">账户收益</view>
            </u-grid-item>
            <u-grid-item class="border2" index="2">
              <view class="grid-text2">{{res.credit2}}</view>
              <view class="grid-text">账户余额</view>
            </u-grid-item>
            <u-grid-item index="3">
              <view class="grid-text2">{{res.x_yeji}}</view>
              <view class="grid-text">绩效业绩</view>
            </u-grid-item>
            <u-grid-item index="4">
              <view class="grid-text2">{{res.gongzi}}</view>
              <view class="grid-text">绩效工资</view>
            </u-grid-item>
            <u-grid-item class="border2" index="5">
              <view class="grid-text2">{{res.l_yeji}}</view>
              <view class="grid-text">零售业绩</view>
            </u-grid-item>
            <u-grid-item index="6">
              <view class="grid-text2">{{res.ticheng}}</view>
              <view class="grid-text">零售提成</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view> -->

      <!-- 我的服务 -->
      <view class="history-section icon">
        <!-- <view class="" style="font-size: 40upx;font-weight: 550;padding:0upx 20upx;height: 80upx;line-height: 80upx;">
          更多工具
        </view> -->
        <!-- <view class="order-status">
					<view class="status-wrap">
						<view class="status-list">
							<view class="status-item" hover-class="btn-hover" v-for="(item, index) in user1" :key="index" @click="navTo(item.path)">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-text">{{ item.name }}</view>
							</view>
						</view>
					</view>
					<view class="status-wrap">
						<view class="status-list">
							<view class="status-item" hover-class="btn-hover" v-for="(item, index) in user2" :key="index" @click="navTo(item.path)">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-text">{{ item.name }}</view>
							</view>
						</view>
					</view>
					<view class="status-wrap">
						<view class="status-list">
							<view class="status-item" hover-class="btn-hover" v-for="(item, index) in user3" :key="index" @click="navTo(item.path)">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-text">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view> -->

      </view>
    </view>
    <view class="user">
      <!-- 用户功能 -->
      <view class="com-item">
        <view class="com-wrap">
          <view class="cell" @click="jump" :data-src="item.path" v-for="(item, index) in userList" :key="index">
            <view class="cell-left">
              <image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
              <view class="cell-text">{{ item.title }}</view>
            </view>
            <uni-icons type="arrowright" size="14"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 用户服务 -->
      <view class="com-item">
        <view class="com-wrap">
          <view class="cell cell2" @click="jump" :data-src="item.path" v-for="(item, index) in serverList" :key="index">
            <view class="cell-left">
              <image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
              <view class="cell-text">{{ item.title }}</view>
            </view>
            <uni-icons type="arrowright" size="14" color="#666"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import uniIcons from '@/components/uni-icons/uni-icons.vue';
  import listCell from '@/components/mix-list-cell';
  import {
    mapState
  } from 'vuex';
  let startY = 0,
    moveY = 0,
    pageAtTop = true;
  export default {
    components: {
      listCell,
      uniIcons
    },
    data() {
      return {
        user_id: '',
        token: '',
        timestamp: '',
        res: [],
        percent1: 0,
        percent: '',
        integration: '',
        level_name: '',
        real_head_img: '',
        real_name: '',
        coverTransform: 'translateY(0px)',
        coverTransition: '0s',
        moving: false,
        openid: "",
        userList: [
          // {
          //   title: '收益明细',
          //   icon: '../../static/menu5.png',
          //   path: '/pageA/jjmx/jjmx'
          // },
          {
            title: '我的邀请',
            icon: '../../static/004.png',
            path: '/pages/my_invite/my_invite'
          },
          // {
          //   title: '我的钱包',
          //   icon: '../../static/menu5.png',
          //   path: '/pages/commission/all'
          // },
          // {
          //   title: '专属海报',
          //   icon: '../../static/menu_six.png',
          //   path: '/pages/commission/qrcode/invite_code'
          // },
          {
            title: '会员注册',
            icon: '../../static/menu_three.png',
            path: '/pages/team/team'
          },
          {
            title: 'APP下载',
            icon: '../../static/huiyuanziliao.png',
            path: '/pages/download/download'
          },
        ],
        serverList: [
          // {
          //   title: '会员资料',
          //   icon: '../../static/huiyuanziliao.png',
          //   path: '/pageA/member/info/info'
          // },
          {
            title: '新闻资讯',
            icon: '../../static/003.png',
            path: '/pages/media/media'
          },
          {
            title: '我的支付宝',
            icon: '../../static/member_zfb.png',
            path: '/pages/order/pay/zfbmsg'
          },
          {
            title: '我的足迹',
            icon: '../../static/guanzhuw.png',
            path: '/pageA/member/history'
          },
          {
            title: '地址管理',
            icon: '../../static/menu1.png',
            path: '/pageA/member/address/address'
          },

        ],
        user1: [{
            name: '会员资料',
            icon: '/static/06.png',
            path: '/pageA/member/info/info',
            badge: 0
          },
          {
            name: '余额明细',
            icon: '../../static/07.png',
            path: '/pageA/jjmx/jjmx',
            badge: 0
          },
          {
            name: '我的分享',
            icon: '../../static/08.png',
            path: '/pageA/member/myterritory',
            badge: 0
          },
          {
            name: '鸿善智家券',
            icon: '../../static/09.png',
            path: '/pageA/wpq/wpq',
            badge: 0
          }
        ],
        user2: [{
            name: '会员互转',
            icon: '../../static/99.png',
            path: '/pages/hyhz/hyhz',
            badge: 0
          },
          {
            name: '我的足迹',
            icon: '../../static/10.png',
            path: '/pageA/member/history',
            badge: 0
          },
          {
            name: '专属海报',
            icon: '../../static/11.png',
            path: '/pages/commission/qrcode/invite_code',
            badge: 0
          },
          {
            name: '优惠券',
            icon: '../../static/12.png',
            path: '',
            badge: 0
          }
        ], // @click="navTo('/pageA/yhq/yhq')"  优惠券
        user3: [{
            name: '地址管理',
            icon: '../../static/98.png',
            path: '/pageA/member/address/address',
            badge: 0
          },
          {
            name: '会员充值',
            icon: '../../static/13.png',
            path: '/pages/chongzhi/chongzhi',
            badge: 0
          },
          {
            name: '我的客服',
            icon: '../../static/14.png',
            path: '',
            badge: 0
          },
          {
            name: '新闻公告',
            icon: '../../static/15.png',
            path: '/pages/media/media',
            badge: 0
          }
        ],
      }
    },
    onShow: function() {
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setajax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      setajax() {
        uni.request({
          url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
          method: 'POST',
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: {
            'openid': this.openid
          },
          success: res => {
            this.res = res.data
            console.log(this.res)
            uni.setStorage({
              key: 'pid_father',
              data: res.data.id
            })
          },
          fail: () => {},
          complete: () => {}
        });
      },
      navTo(url) {
        if (url == "") {
          this.jumpno()
          return
        } else {
          uni.navigateTo({
            url
          })
        }
      },
      jump(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.src
        });
      },
      logout() {
        uni.showModal({
          content: "是否退出登录",
          confirmText: "确定",
          cancelText: "取消",
          success: res => {
            if (res.confirm) {
              uni.clearStorageSync()
              uni.reLaunch({
                url: '../login/login'
              });
            }
          }
        })
      },
      jumpno() {
        uni.showModal({
          title: '提示',
          content: '功能即将开放',
          showCancel: false,
          confirmColor: "#DD524D",
          success() {
            return
          }
        })
      },
      async gridClick(income_type) {
        uni.navigateTo({
          url: '/pages/qianbao/qianbao?type=' + income_type,
        });
      },

    }
  }
</script>
<style lang='scss'>
  
  .grid-text {
    font-size: 24rpx;
    margin: 8rpx 0 16rpx;
    color: $u-type-info;
  }
  .grid-text2 {
    font-size: 34rpx;
    color: #B86B3F;
  }
  .border2 {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    margin: 20rpx 0;
  }
  /deep/ .u-grid-item-box {
    padding: 0 !important;
  }

  .order-status {
    padding: 0 20rpx;

    .status-wrap {
      border-radius: 25rpx;
      overflow: hidden;

      .status-list {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background: #fff;
        padding-top: 30rpx;
        padding-bottom: 30rpx;

        .status-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .item-icon {
            line-height: 1;
            width: 80upx;
            height: 80upx;
            color: #bbb;

            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .item-text {
            height: 40upx;
            line-height: 40upx;
            font-size: 28rpx;
            color: #666;
            margin-top: 5rpx;
          }
        }
      }
    }
  }

  .btn-hover {
    background: #f2f2f2 !important;
  }



  button::after {
    border: none;
  }

  button {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    line-height: inherit;
  }

  button {
    border-radius: 0;
  }

  %flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  %section {
    display: flex;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    border-radius: 10upx;
  }

  .user-section {
    height: 200upx;
    padding: 60upx 20upx 0upx 20upx;
    position: relative;

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      filter: blur(1px);
      background-color: #d01819;
      /* opacity: .7; */
    }
  }

  .user-info-box {
    color: #fff;
    height: 170upx;
    display: flex;
    position: relative;
    z-index: 1;

    .portrait {
      width: 130upx;
      height: 130upx;
      border: 5upx solid #fff;
      border-radius: 50%;
    }

    .username {
      width: 30upx;
      margin-left: 20upx;
    }

    .userid {
      margin-left: 20upx;
    }
  }

  .vip-card-box {
    display: flex;
    flex-direction: column;
    color: #f7d680;
    height: 240upx;
    background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
    border-radius: 16upx 16upx 0 0;
    overflow: hidden;
    position: relative;
    padding: 20upx 24upx;

    .card-bg {
      position: absolute;
      top: 20upx;
      right: 0;
      width: 380upx;
      height: 260upx;
    }

    .b-btn {
      position: absolute;
      right: 20upx;
      top: 16upx;
      width: 132upx;
      height: 40upx;
      text-align: center;
      line-height: 40upx;
      font-size: 22upx;
      color: #36343c;
      border-radius: 20px;
      background: linear-gradient(left, #f9e6af, #ffd465);
      z-index: 1;
    }

    .tit {
      font-size: $font-base+2upx;
      color: #f7d680;
      margin-bottom: 28upx;

      .yticon {
        color: #f6e5a3;
        margin-right: 16upx;
      }
    }

    .e-b {
      font-size: 12upx;
      color: #ADADAD;
      margin-top: 20upx;
    }
  }

  .cover-container {
    background: $page-color-base;
    margin-top: -180upx;
    /* padding: 0 30upx; */
    position: relative;
    background: #f5f5f5;

    /* padding-bottom: 20upx; */
    .arc {
      position: absolute;
      left: 0;
      top: -34upx;
      width: 100%;
      height: 36upx;
    }
  }

  .tj-sction {
    background-color: #d01819;
    color: #fff;
    @extend %section;

    .tj-item {
      @extend %flex-center;
      /* flex-direction: column; */
      height: 90upx;
      font-size: $font-sm;
      color: #fff;
    }

    .num {
      font-size: $font-lg;
      color: #fff;
      margin-bottom: 8upx;
    }
  }

  .order-section {
    @extend %section;
    padding: 0upx 0upx 20upx 0upx;

    /* margin-top: 20upx; */
    .order-item {
      @extend %flex-center;
      width: 120upx;
      height: 100upx;
      border-radius: 10upx;
      font-size: $font-sm;
      color: $font-color-dark;
      line-height: 1.2;
    }

    .yticon {
      font-size: 48upx;
      margin-bottom: 18upx;
      color: #fa436a;
    }

    .icon-shouhoutuikuan {
      font-size: 44upx;
    }
  }

  .history-section {
    /* padding: 30upx 0 0; */
    margin-top: 30upx;
    background: #fff;
    border-radius: 10upx;

    .sec-header {
      display: flex;
      /* align-items: center; */
      font-size: $font-base;
      color: $font-color-dark;
      line-height: 40upx;
      margin-left: 30upx;

      .yticon {
        font-size: 44upx;
        color: #5eba8f;
        margin-right: 16upx;
        line-height: 40upx;
      }
    }

    .h-list {
      white-space: nowrap;
      padding: 30upx 30upx 0;

      image {
        display: inline-block;
        width: 160upx;
        height: 160upx;
        margin-right: 20upx;
        border-radius: 10upx;
      }
    }
  }

  .user {
    .user-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vw;
      padding: 30rpx;
      z-index: 9;
      border-radius: 0 0 20% 20%;
      background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
      background-size: cover;

      .setting {
        color: #fff;
        position: absolute;
        top: 60rpx;
        left: 60rpx;
        font-size: 50rpx;
      }

      .info {
        position: absolute;
        text-align: center;

        .avatar {
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
        }

        .nickname {
          color: #fff;
          font-size: 28rpx;
        }
      }
    }

    .order-status {
      padding: 0 20rpx;
      margin-top: -10vw;

      .status-wrap {
        border-radius: 25rpx;
        overflow: hidden;

        .status-list {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          background: #fff;
          padding-top: 30rpx;
          padding-bottom: 30rpx;

          .status-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .item-icon {
              line-height: 1;
              font-size: 65rpx;
              color: #bbb;
            }

            .item-text {
              font-size: 28rpx;
              color: #666;
              margin-top: 5rpx;
            }
          }
        }
      }
    }

    .com-item {

      // padding-left: 40rpx;
      // padding-right: 40rpx;
      /* margin-top: 20rpx; */
      .com-wrap {
        /* border-radius: 25rpx; */
        overflow: hidden;
      }
    }

    .cell2:last-child {
      border-bottom: none !important;
    }

    .cell {
      height: 80rpx;
      padding-left: 40rpx;
      padding-right: 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #f8f8f8;

      &:active {
        background: #f2f2f2;
      }

      /* &:last-child {
				border-bottom: none !important;
			} */
      .cell-left {
        display: flex;
        align-items: center;

        .cell-icon {
          width: 40rpx;
          height: 40rpx;
        }

        .cell-text {
          color: #000;
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }

      .iconfont {
        font-size: 40rpx;
        color: #999;
      }
    }
  }
</style>
